<template>
	<view :style="dragStyle" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
		@click="goTargetAddress" class="open-btn">
		+
	</view>
</template>

<script setup>
	// 引入 Vue3 的 Composition API
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
	const props = defineProps({
		go: {
			type: String,
			default: '/pages/shouye/shouye'
		},
		bottom: {
			type: Number,
			default: 150
		},

	})

	// 定义组件拖拽的相关数据
	const startX = ref(50); // 起始触摸位置 X
	const startY = ref(50); // 起始触摸位置 Y
	const currentX = ref(0); // 当前拖拽的偏移 X
	const currentY = ref(0); // 当前拖拽的偏移 Y
	const isDragging = ref(false); // 是否正在拖拽

	// 屏幕宽高
	const screenWidth = ref(0);
	const screenHeight = ref(0);

	// 获取屏幕尺寸信息
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		screenWidth.value = systemInfo.screenWidth;
		screenHeight.value = systemInfo.screenHeight;
	});

	// 手指触摸开始事件
	const onTouchStart = (e) => {
		const touch = e.touches[0]; // 获取触摸点
		startX.value = touch.clientX;
		startY.value = touch.clientY;
		isDragging.value = true;
	};

	// 手指触摸移动事件
	const onTouchMove = (e) => {
		if (!isDragging.value) return;

		const touch = e.touches[0];
		let deltaX = touch.clientX - startX.value;
		let deltaY = touch.clientY - startY.value;

		// 限制拖拽范围，避免组件被拖出屏幕
		if (deltaX < 0) deltaX = 0; // 防止向左拖动
		if (deltaY < 0) deltaY = 0; // 防止向上拖动
		if (deltaX + 45 > screenWidth.value) deltaX = screenWidth.value - 45; // 防止拖出屏幕右边
		if (deltaY + 45 > screenHeight.value) deltaY = screenHeight.value - 45; // 防止拖出屏幕底部

		currentX.value = deltaX;
		currentY.value = deltaY;
	};

	// 手指触摸结束事件
	const onTouchEnd = () => {
		startX.value = startX.value + currentX.value;
		startY.value = startY.value + currentY.value;
		isDragging.value = false;
	};

	// 动态更新拖拽组件的位置
	const dragStyle = computed(() => ({
		// left: `${startX.value + currentX.value}px`,
		// top: `${startY.value + currentY.value}px`,
		position: 'fixed', // 固定定位
		// bottom: props.bottom + 'rpx'
	}));
	const goTargetAddress = () => {

		uni.navigateTo({
			url: props.go
		})


	}
</script>

<style scoped lang="scss">
	.open-btn {
		position: fixed;
		right: 50rpx;
		bottom: 180rpx;
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		opacity: 1;
		background-color: #4c8eef;
		border-radius: 50%;
		overflow: hidden;
		color: white;
		font-size: 60rpx;
		z-index: initial;
		cursor: move;
	}
</style>